<template>
  <!-- 缴费记录 -->
  <view>
	  <uni-navbar :title="'缴费记录'"></uni-navbar>
    <div class="jiaof" v-for="(item,index) in list" :key="index">
     <div class='jiaof-one'>
      <h3>{{item.name}}</h3>
      <span>{{item.text}}</span>
     </div>
     <div class="jiaof-two">
       <ul>
         <li>
           <span>创建时间：{{item.housh}}</span>
         </li>
         <li>
           <span>缴费类型：{{item.zf}}</span>
         </li>
         <li>
           <span>缴费方式：{{item.wxzf}}</span>
         </li>
         <li>
           <span>缴费金额：{{item.jine}}</span>
         </li>
       </ul>
     </div>
    </div>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list:[
          {
            name:'2021全程面授班-助理',
            text:'折扣价2624元',
            housh:'2021-03-21 10:18',
            zf:'线上支付',
            wxzf:'微信',
            jine:'已支付2624元'
          }
        ]
      };
    }
  }
</script>

<style lang="scss">
  page{
    background-color: #eee;
  }
.jiaof{
  background-color: #fff;
  padding: 30rpx;
  .jiaof-one{
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3{
      font-size: 26rpx;
      font-weight: 500;
      color: #4D4D4D;
    }
    span{
      font-size: 20rpx;
      font-weight: 400;
      color: #999999;
    }
  }
  .jiaof-two{
    margin-top: 15rpx;
    border-top: 2rpx solid #E6E6E6;
    ul{
      margin-top: 20rpx;
      li{
        margin-top: 30rpox;
        span{
         font-size: 20rpx;
         font-weight: 400;
         color: #999999; 
        }
      }
    }
  }
}
</style>
